import 'package:flutter/material.dart';
import 'package:puby/tools/index.dart';

import '../../common/index.dart';
import '../../models/index.dart';
import 'detail_image_long_widget.dart';

class EgDetailWidget extends StatefulWidget {
  const EgDetailWidget({
    super.key,
    required this.imageList,
  });
  final List<ImageNormalModel> imageList;
  @override
  State<StatefulWidget> createState() {
    return EgDetailWidgetState();
  }
}

class EgDetailWidgetState extends BaseStateWidget<EgDetailWidget> {
  // --------- 公开属性  --------- //

  // --------- 私有属性  --------- //
  int relaIndex = 0;
  // --------- 生命周期  --------- //

  // --------- 构建UI  --------- //

  @override
  Widget createBody({
    required BuildContext context,
    BoxConstraints? constraints,
  }) {
    Widget body = DetailImageLongWidget(
      imageList: widget.imageList,
      scrollerIndex: (index) {
        configSetState(() {
          relaIndex = index;
        });
      },
    );
    body = Container(
      alignment: Alignment.center,
      decoration: const BoxDecoration(
        color: Colors.black,
      ),
      child: body,
    );
    body = Stack(
      children: [
        body,
        createNavBarWidget(),
      ],
    );
    return body;
  }

  createNavBarWidget() {
    Widget body = Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        createNavIconWidget(),
        createNavNumWidget(),
      ],
    );
    body = Container(
      alignment: Alignment.centerRight,
      padding: EdgeInsets.only(
        right: 20,
        top: ScreeTool.statusBarHeight,
      ),
      decoration: configBoxDecoreation(),
      child: body,
    );
    body = Positioned(
      left: 0,
      right: 0,
      top: 0,
      child: body,
    );
    return body;
  }

  configBoxDecoreation() {
    return BoxDecoration(
      gradient: LinearGradient(
        colors: [
          Colors.black45,
          Colors.black38,
          Colors.black26,
          Colors.black12,
          Colors.black.withOpacity(0),
        ],
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
      ),
    );
  }

  createNavIconWidget() {
    Widget body = IconButton(
      icon: const Icon(
        Icons.close,
        color: Colors.white,
      ),
      onPressed: () {
        currentGoback();
      },
    );
    return body;
  }

  createNavNumWidget() {
    Widget body = RichText(
      text: TextSpan(
        children: [
          TextSpan(
            text: "${relaIndex + 1}",
            style: const TextStyle(
              fontSize: 25,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
          TextSpan(
            text: " / ${widget.imageList.length}",
            style: const TextStyle(
              fontSize: 14,
              color: Colors.white,
            ),
          )
        ],
      ),
    );

    return body;
  }
  // --------- 数据处理  --------- //

  // --------- 触发事件  --------- //
}
